<template>
	<cl-popup v-model="visible" direction="bottom" :padding="0" border-radius="32rpx 32rpx 0 0">
		<view class="sharebtn">
			<view class="uni-share">
				<view class="uni-share-content">
					<view v-for="(item, index) in list" :key="index" class="uni-share-content-box"
						@click='btnShare(item.name)'>
						<view class="uni-share-content-image">
							<image :src="item.icon" class="content-image" />
						</view>
						<text class="uni-share-content-text">{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
	</cl-popup>
</template>

<script name="share" setup lang="ts">
	import { ref, onMounted } from "vue";
	import { useCool, useApp } from "/@/cool";
	import { useUi } from "/$/cool-ui";
	
	import { config } from "/@/config";
	const app = useApp();
	const { service, storage } = useCool();
	const ui = useUi();
	
	const visible = ref(false)
	const props = defineProps({
		href: String,
		title: String,
		summary: String,
		imageUrl: String,
		query:String
	});
	const list = ref([{
		text: '微信',
		icon:`${config.tencentCloud}/weixin.png`,
		name: 'WXSceneSession',
		value: 0
	},
	{
		text: '朋友圈',
		icon:`${config.tencentCloud}/pengyouquan.png`,
		name: 'WXSceneTimeline',
		value: 1
	}
	])
	defineExpose({
		open
	});
	function open(){
		visible.value=true
	}
	function closeDialog() {
		visible.value=false
	}
	function btnShare(scene: any) {
		
		uni.share({
			provider: "weixin",
			scene,
			href:`https://www.hd0810.com/h5/${props.href}`,
			title: props.title,
			summary: props.summary,
			imageUrl: props.imageUrl,
			success:()=>{
				ui.showToast("分享成功")
				closeDialog()
			},
			fail:(err)=>{
				ui.showToast(`分享失败${err}`)
				closeDialog()
			}
		})
	}
</script>

<style lang="scss">
	/* 底部分享 */
	.sharebtn {
		.uni-share {
			flex: 1;
			margin: 20rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			background-color: #fff;

			.uni-share-content {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				flex-wrap: nowrap;
				overflow-x: scroll;
				padding: 15px 30rpx;

				.uni-share-content-box {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					margin-right: 60rpx;

					&:nth-last-child(1) {
						margin-right: 0;
					}

					.uni-share-content-image {
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: row;
						justify-content: center;
						align-items: center;
						width: 90rpx;
						height: 90rpx;
						overflow: hidden;
						border-radius: 10rpx;

						.content-image {
							width: 90rpx;
							height: 90rpx;
						}
					}

					.uni-share-content-text {
						font-size: 26rpx;
						color: $cl-color-title;
						padding-top: 5px;
						padding-bottom: 10px;
					}
				}
			}
		}
	}
</style>